<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <!--引入Elementui组件-->

    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
    <style>
        /*二级导航*/
        .my-list-ejdh {
            border: 1px solid #E5E5E5;
            height: 38px;
            top: 20px;
        }

        /*二级导航下的分类*/
        .my-list-ejdh-a {
            display: block;
            float: left;
            width: 80px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            margin: 5px 5px;
        }

        .my-list-ejdh a:hover {
            color: #FF4400;
        }

        /*排序*/
        .my-list-paixu {
            border: 1px solid #E5E5E5;
            height: 50px;
            background-color: #fff;
            margin-top: 30px;
        }

        .my-list-paixu-a {
            display: block;
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 14px;
            float: left;
        }

        .my-list-paixu-a:hover {
            background-color: #FF4400;
            color: #fff;
        }

        .currentActive {
            color: #FF4400;
        }
    </style>
    <script>
        $(function () {
            //纵向导航列表的二级导航的显示和隐藏
            $(".my-daohang2 li").mouseenter(function () {
                $(".my-daohang2-2").show();
            });
            $(".my-daohang2 li").mouseleave(function () {
                $(".my-daohang2-2").hide();
            });
            $(".my-daohang2-2").mouseenter(function () {
                $(this).show();
            });
            $(".my-daohang2-2").mouseleave(function () {
                $(this).hide();
            });

            //轮播下方促销图片的悬停事件
            $(".my-cximg").mouseenter(function () {
                $(this).css({"border-color": "#FF5722"});
            });
            $(".my-cximg").mouseleave(function () {
                $(this).css({"border-color": "#FFF"});
            });

            //回到顶部按钮
            $("#my-backtop").click(function () {
                $("html,body").animate({
                    scrollTop: 0
                }, 500);
            });

            //鼠标滚动事件，显式回到顶部按钮
        });
    </script>
</head>


<body>

<!-- 引入头部 -->
<div>
    <iframe src="header.html" scrolling="no" style="height:140px;width: 100%;border: 0px;"></iframe>
</div>
<!--引入头部end-->

<div class="my-index-body" id="app">
    <!--横向导航栏-->
    <div class="my-daohang1">
        <div class="layui-container">
            <div class="layui-row">
                <!--菜单-->
                <div class="layui-col-md9" style="height: 50px;">
                    <a href="">首页</a>
                    <a href="">优抢购</a>
                    <a href="">聚划算</a>
                    <a href="">大转盘</a>
                    <a href="">会员折扣</a>
                    <a href="">买家秀</a>
                </div>
            </div>
        </div>
    </div>
    <!--横向导航end-->


    <!--促销活动部分-->
    <div class="my-cuxiaodiv">

    </div>
    <!--促销活动部分end-->

    <!-- 二级导航部分 -->
    <div class="my-list-ejdh layui-container">
        <p>
            <strong class="my-list-ejdh-a">分类：</strong>
            <a v-for="(c,index) in catalogList" :class="{'currentActive': index===currentActiveIndex}" :key="c.cid"
               href="javascript:void(0);" @click="changeCatalogList(index,c)" class="my-list-ejdh-a">{{c}}</a>

        </p>
    </div>
    <!--排序-->
    <div class="my-list-paixu layui-container">
        <a href="" class="my-list-paixu-a">按销量</a>
        <a href="" class="my-list-paixu-a">按评分</a>
        <a href="" class="my-list-paixu-a">价格升序</a>
        <a href="" class="my-list-paixu-a">价格降序</a>
    </div>
    <!--二级导航部分end-->

    <!--商品展示部分-->
    <div class="layui-container my-goods" style="border-radius: 0px;top: 10px;">
        <!--商品列表-->
        <div class="my-goods-list layui-row">
            <!-- 前端实现的分页
            <div v-for="(i,index) in itemsPager" :key="i.id" class="goods-mess layui-col-md3">

                <div class="goods-img">
                    <a href="goodsMess.html">
                        <img :src="i.pic"/>
                    </a>
                </div>

                <p class="goods-price">￥{{i.price}}</p>

                <p class="goods-sellnum">月销：{{i.number}}笔</p>

                <p class="goods-biaoti">
                    <a href="goodsMess.html">
                        {{i.name}}
                    </a>
                </p>
            </div>
            -->

            <div v-for="(i,index) in itemsList" :key="i.id" class="goods-mess layui-col-md3">
                <div class="goods-img">
                    <a :href="'goodsMess.html?id='+i.id">
                        <img :src="i.pic"/>
                    </a>
                </div>
                <p class="goods-price">￥{{i.price}}</p>
                <p class="goods-sellnum">月销：{{i.number}}笔</p>
                <p class="goods-biaoti">
                    <a href="goodsMess.html">
                        {{i.name}}
                    </a>
                </p>
            </div>
        </div>
    </div>
    <!--商品展示部分end-->

    <!-- 原来的Layui的分页组件
    <div class="my-pagebrake" style="height: 80px;text-align: center;">
        <div id="test1"></div>
    </div>
    -->
    <!-- 分页end -->
    <!-- 方式一：前端实现的分页
    <div class="my-pagebrake" style="height: 80px;text-align: center;">
        <el-pagination
                :current-page.sync="currentPage"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                :pager-count="15"
                layout="prev, pager, next"
                :total="itemsList.length">
        </el-pagination>
    </div>
    -->

    <!---方式二：后端实现的分页-->
    <div class="my-pagebrake" style="height: 80px;text-align: center;">
        <el-pagination
                background
                :current-page.sync="pager.current"
                layout="prev, pager, next"
                :page-size="pager.size"
                :pager-count="pager.pages"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :total="pager.total">
        </el-pagination>
    </div>

    <!--引入底部-->
    <div class="my-footer">
        <iframe src="footer.html" scrolling="no" style="border: 0px;width: 100%;height: 291px;"></iframe>
    </div>
    <!--引入底部end-->

    <!--回到顶部按钮-->
    <div id="my-backtop">
        <span class="layui-icon layui-icon-up"></span>
    </div>

</div>

<script src="js/include/libs.js"></script>

</body>
<script>

    layui.use(['element', 'carousel', 'laypage'], function () {
        var element = layui.element;
        var carousel = layui.carousel;
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1'
            , count: 100
            , theme: '#FF5722'
        });

        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });

    //创建一个vue对象
    let vm = new Vue({
        el: '#app',
        data: {
            currentActiveIndex: 0,
            pageSize: 8,   //每页的记录数
            currentPage: 1, //当前的页号，

            catalogList: [
                '全部'
            ],
            itemsList: [

            ],
            //用户分页对象
            pager:{
                current: 1
            },


        },
        mounted() {
            this.initCatalogList();
            //this.initItemsList();
            this.initCurrentPager();
        },
        //把当前分页数据当成一个计算属性
        computed:{
            /*
            itemsPager: function () {
                return this.itemsList.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
            }*/
        },
        methods: {
            initCatalogList() {
                queryAllCatalogList().then(resp => {
                    if (resp.data.code === 200) {
                        //this.catalogList = resp.data.data;

                        for (let i = 0; i < resp.data.data.length; i++) {
                            let c = resp.data.data[i];
                            this.catalogList.push(c.catalog);
                        }
                        console.log("商品分类列表集合是");
                        console.log(this.catalogList)
                    }
                })
            },

            initItemsList() {
                queryItemsListByCatalogName(this.catalogList[this.currentActiveIndex]).then(resp => {
                    if (resp.data.code === 200) {
                        this.itemsList = resp.data.data;
                        //当前板块下的商品列表信息
                        console.log("---当前板块下的商品列表信息----")
                        console.log(this.itemsList);
                        //vm.$forceUpdate()
                    }
                })
            },

            changeCatalogList(index, catalogName) {
                console.log("索引是：" + index + ",分类的名字是：" + catalogName);
                this.currentActiveIndex = index;
                //this.currentPage = 1; //把当前页号重新置为1；
                this.pager.current =1;
                //this.initItemsList();
                this.initCurrentPager();
            },

            //方式一：前端实现分页的点击事件实现方法
            // 初始页currentPage、初始每页数据数pagesize和数据data
            /*
            handleSizeChange: function (size) {
                this.pageSize = size;
                //console.log(this.pageSize)  //每页下拉显示数据
            },
            handleCurrentChange: function (currentPage) {
                this.currentPage = currentPage;
                //console.log(this.currentPage)  //点击第几页
            }*/

            //初始化咱们的分页对象
            initCurrentPager(){
                let params = {
                   catalogName: this.catalogList[this.currentActiveIndex],
                   currentPageNumber: this.pager.current
                };

                queryItemsPagerListByCatalogName(params).then(resp=>{
                    if(resp.data.code === 200){
                        this.pager = resp.data.data;
                        console.log("-------------当前的分页对象是------------")
                        console.log(this.pager);
                        this.itemsList = this.pager.records;
                    }
                })
            },

            // 换页
            handleCurrentChange: function(val) {
                console.log("-----点击的当前页号-------")
                console.log(val);
                this.pager.current =val;
                this.initCurrentPager();
            },
            // 每页显示数量
            handleSizeChange: function(val) {
                console.log(val);
            }

        }
    })
</script>

<style>
    /*全局分页器样式修改*/
    .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #fc6602;
        color: #fff;
    }

    .el-pagination.is-background .el-pager li.active {
        color: #fff;
        cursor: default;
    }

    .el-pagination.is-background .el-pager li:hover {
        color: #fc6602;
    }

    .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #fc6602;
    }

    .el-pagination.is-background
    .el-pager
    li:not(.disabled).active:hover {
        background-color: #fc6602;
        color: #fff;
    }

    .el-select-dropdown__item.selected {
        color: #fc6602 !important;
    }

    .el-select .el-input.is-focus .el-input__inner {
        border-color: #fc6602 !important;
    }

    .el-pagination .el-select .el-input .el-input__inner:hover {
        border-color: #fc6602 !important;
    }

    .el-input.is-active .el-input__inner,
    .el-input__inner:focus {
        border-color: #fc6602 !important;
    }
</style>
</html>
